<template>
  <div class="container">
    <aside>
      <ul>
        <li v-for="(item, index) in 3" :key="index">
          <img
            src="//mbb-pub.oss-cn-hangzhou.aliyuncs.com/img/201612/07/%E4%BD%8D%E5%9B%BE.png"
            alt
          />
          <div>
            <div class="row-top">
              <span class="username">用户名</span>
              <span class="time">10:17</span>
            </div>
            <span class="record">上次聊天记录上次聊天记录上次聊天记录上次聊天记录</span>
          </div>
        </li>
      </ul>
    </aside>
    <div class="chat-box">
      <div class="record-box"></div>
      <div class="input-box">
        <el-input placeholder="请输入聊天内容" type="textarea" resize="none" rows="5" v-model="input" />
        <el-button type="plain" size="small" @click="onSend">发送</el-button>
      </div>
    </div>
  </div>
</template>
<script >
  export default {
    name: 'ChatBox',
    data() {
      return {
        input: ''
      };
    },
    methods: {
      onSend() {}
    },
    created() {}
  };
</script>
<style lang="scss" type="text/scss" scoped>
.container {
  padding: 0;
  margin: 0;
  height: 100%;
  border: 1px solid $c1;
  display: flex;
  align-items: stretch;
}

aside {
  flex-shrink: 0;
  ul {
    max-height: 100%;
    height: 100%;
    overflow-y: auto;
    border-right: 1px solid $c1;
    li {
      @include v-center();
      width: 222px;
      padding: 12px;
      font-size: 13px;
      border-bottom: 1px solid $c1;
      cursor: pointer;
      img {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        margin-right: 8px;
        flex-shrink: 0;
      }
      & > div {
        width: 0;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        .row-top {
          @include h-btw();
          .time {
            font-size: 12px;
            color: #999;
          }
        }
        .record {
          @include line-elli();
        }
        span {
          padding: 6px 0;
        }
      }
    }
  }
}

.chat-box {
  width: 0;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .input-box {
    height: 160px;
    border-top: 1px solid $c1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    ::v-deep textarea {
      border: none;
      border-radius: 0;
      border-bottom: 1px solid $c1;
    }
    .el-button {
      margin-right: 8px;
      margin-bottom: 5px;
    }
  }
}
</style>
